<script setup
        lang="ts">
import {onMounted, ref} from 'vue'
import { User,Lock,Check, Plus} from '@element-plus/icons-vue'
import {getCaptchaApi,  validCaptchaApi} from '@/services/user.service'
import type { FormInstance, FormRules } from 'element-plus'
import {useStore} from "vuex";
import {ILoginForm} from "@/types/login";

const $store=useStore()
const ruleFormRef = ref<FormInstance>()//登录表单组件
let captcha=ref('')//验证码
onMounted( ()=>{
  getCaptcha()
})


const loginForm = ref<ILoginForm>({
  username: 'admin',
  password: 'admin',
  captcha:''

})

const captchaRef=ref()

//验证
const rules = ref<FormRules<typeof loginForm>>({
  username: [{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }],

  captcha: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  },{
    max:4,
    min:4,
    message: '请输入四位数验证码',
    trigger: 'blur'
  }],
  // valid_password: [{
  //   required: true,
  //   message: '请再次输入密码',
  //   trigger: 'blur'
  // }],

})


/**
 * 获取验证码
 * @returns {Promise<void>}
 */
const getCaptcha=async ()=>{
  let res = await getCaptchaApi();
  captcha.value= res.data
}

/**
 * 登录
 * @param formEl
 * @returns {Promise<void>}
 */
const login =  async(formEl:FormInstance|undefined) => {
  if (!formEl) return

  formEl.validate(async (valid:boolean) => {
    if (valid) {
      //验证验证码是否正确
      let res = await validCaptchaApi(loginForm.value.captcha)
      //验证码验证成功
      if (res['success']) {
        $store.dispatch('userStore/asyncLogin', loginForm.value)
      }else{
        //验证失败则重新获取验证码
        getCaptcha()
        loginForm.value.captcha=''
        captchaRef.value.focus()
      }
    }
    loginForm.value.captcha=''
    captchaRef.value.focus()


  })

}



</script>

<template>
  <el-row :gutter="15">
    <el-form ref="ruleFormRef"
             :model="loginForm"
             :rules="rules"
             size="small"
             label-width="100px">
      <el-col :span="24">
        <el-form-item label="用户名"
                      prop="username">
          <el-input v-model="loginForm.username"
                    placeholder="请输入用户名"
                    clearable
                    :prefix-icon="User"
                    :style="{height:'25px',width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="loginForm.password"
                    placeholder="请输入密码"
                    clearable
                    :prefix-icon="Lock"
                    :style="{height:'25px',width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
<!--      <el-col :span="24">
        <el-form-item label="密码验证"
                      prop="valid_password">
          <el-input v-model="loginForm.valid_password"
                    placeholder="请再次输入密码"
                    clearable
                    :prefix-icon="Lock"
                    :style="{height:'25px',width: '100%'}"></el-input>

        </el-form-item>
      </el-col>-->
      <el-col :span="24">
        <el-form-item label="验证码"
                      prop="captcha">
          <el-input v-model="loginForm.captcha"
                    ref="captchaRef"
                    placeholder="请输入验证码"
                    clearable
                    @keyup.enter="login(ruleFormRef)"
                    :prefix-icon="Lock"
                    :style="{width: '60%'}"></el-input>
          <div @click="getCaptcha" v-html="captcha"
               :style="{marginLeft:'5%',width: '35%',height:'25px'}"></div>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-row type="flex"
                justify="start"
                align="top">
          <el-col :span="12">
            <el-form-item label="">
              <el-button type="primary"
                         :icon="Check"
                         @click="login(ruleFormRef)"

                         size="small"> 登录
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=""
                          prop="field116">
              <el-button type="primary"
                         :icon="Plus"
                         size="small"> 注册
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-form>
  </el-row>

</template>

<style scoped>

</style>
